<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘好货 - 注册</title>
    <script src="/static/css/tailwindcss.css"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF4400',
                        secondary: '#FFB800',
                        dark: '#1F2937',
                        light: '#F9FAFB',
                        muted: '#6B7280',
                        surface: '#FFFFFF',
                        'surface-elevated': '#F3F4F6',
                        'primary-light': '#FFEBE0',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    },
                    animation: {
                        'float': 'float 3s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': {transform: 'translateY(0)'},
                            '50%': {transform: 'translateY(-10px)'},
                        }
                    }
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {

            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }


            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }

            .button-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-br from-primary-light via-red-50 to-yellow-50 min-h-screen flex items-center justify-center p-4">
<!-- 背景装饰元素 -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute -top-40 -right-40 w-96 h-96 bg-primary/5 rounded-full blur-3xl animate-float"></div>
    <div class="absolute -bottom-20 -left-20 w-72 h-72 bg-secondary/10 rounded-full blur-3xl"></div>
</div>

<!-- Vue根容器 -->
<div id="app" class="w-full max-w-md relative z-10">
    <!-- 卡片容器 -->
    <div class="bg-surface rounded-2xl shadow-card overflow-hidden transition-all duration-500 hover:shadow-card-hover">
        <!-- 顶部装饰条 -->
        <div class="h-1 bg-gradient-to-r from-primary to-secondary"></div>

        <!-- 注册表单 -->
        <div class="p-8 md:p-10">
            <!-- 品牌标识 -->
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4 transform transition-transform duration-500 hover:scale-110">
                    <i class="fa fa-user-plus text-3xl text-primary"></i>
                </div>
                <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-2 bg-gradient-to-r from-primary to-secondary text-gradient">
                    注册账号</h1>
                <p class="text-muted text-sm md:text-base">开启您的购物之旅</p>
            </div>

            <!-- 表单 -->
            <form @submit.prevent="register" class="space-y-6">
                <!-- 用户名 -->
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-dark">用户名</label>
                    <div class="relative">
              <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-muted">
                <i class="fa fa-user"></i>
              </span>
                        <input
                                type="text"
                                v-model="form.username"
                                required
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 input-focus transition-all duration-300 placeholder-muted placeholder-opacity-75"
                                placeholder="请输入用户名">
                    </div>
                </div>

                <!-- 密码 -->
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-dark">密码</label>
                    <div class="relative">
              <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-muted">
                <i class="fa fa-key"></i>
              </span>
                        <input
                                type="password"
                                v-model="form.password"
                                required
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 input-focus transition-all duration-300 placeholder-muted placeholder-opacity-75"
                                placeholder="请输入6-16位密码">
                    </div>
                </div>

                <!-- 确认密码 -->
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-dark">确认密码</label>
                    <div class="relative">
              <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-muted">
                <i class="fa fa-key"></i>
              </span>
                        <input
                                type="password"
                                v-model="form.confirmPassword"
                                required
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 input-focus transition-all duration-300 placeholder-muted placeholder-opacity-75"
                                placeholder="请再次输入密码">
                    </div>
                </div>

                <!-- 注册按钮 -->
                <button
                        type="submit"
                        class="w-full py-3 px-4 bg-gradient-to-r from-primary to-primary/90 text-white rounded-lg font-medium shadow-lg
                   shadow-primary/20 button-hover flex items-center justify-center">
                    <span>立即注册</span>
                    <i class="fa fa-arrow-right ml-2"></i>
                </button>
            </form>

            <!-- 已有账号提示 -->
            <div class="mt-6 text-center">
                <p class="text-sm text-muted">
                    已有账号? <a href="/login"
                                 class="font-medium text-primary hover:text-primary/80 transition-colors duration-300">立即登录</a>
                </p>
            </div>
        </div>
    </div>

    <!-- 底部版权信息 -->
    <div class="mt-6 text-center text-xs text-muted">
        <p>© 2025 淘好货. 保留所有权利.</p>
    </div>
</div>
</body>
<script src="/static/js/vue.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/js/message.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                username: '',
                password: '',
                confirmPassword: '',
            }
        },
        methods: {
            async register() {
                // 简单验证
                if (!this.form.username || !this.form.password || !this.form.confirmPassword) {
                    message.error('请填写所有字段');
                    return;
                }

                if (this.form.password !== this.form.confirmPassword) {
                    message.error('两次输入的密码不一致');
                    return;

                }

                if (this.form.password.length < 6) {
                    message.error('密码长度至少为6位');
                    return;
                }
                try {
                    const response = await fetch('/register', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this.form)
                    });
                    if (response.ok) {
                        message.success('注册成功!');
                        window.location.href = '/login';
                    } else {
                        const error = await response.json();
                        message.error(error.message);
                    }
                } catch (error) {
                    message.error('网络错误，请稍后重试');
                }
            }
        }
    });
</script>
</html>